<template>
  <div class="hhh">
    <Header>
      <router-link to='/user' tag='i' class="iconfont icon-jiantou1" slot='left'></router-link>
      积分
    </Header>
    <div class="top">
      <div class="bg"></div>
      <div class="yq">
        <div class="dian"></div>
        <h4>{{ sum }}/{{ summ }}</h4>
        <p><span>现有</span>积分/总积分</p>
      </div>
      <router-link to='/integralInfo' tag='div' class="gz">
        积分规则
        <i class="iconfont icon-wenhao"></i>
      </router-link>
      <div class="bobg"></div>
    </div>
    <div class="bt">
      <span :class="state === 1 ? 'active' : ''" @click="sr">
        收入
      </span>
      <span  :class="state ===2 ? 'active' : ''" @click="zc">
        支出
      </span>
    </div>
    <ul class="main">
      <div v-if="kg" class="ff">
        <li v-for="i of intelist" :key="i.userid">
          <h5>{{ i.tip }}</h5>
          <p>{{ i.date }}</p>
          <b>+ {{ i.num }}</b>
        </li>
      </div>
      <div class="null" v-else>
        你还没有积分动态，<br>可以看一看积分规则哦。
      </div>
    </ul>
  </div>
</template>
<style lang="scss">
@import '@/lib/reset.scss';
.hhh, html, body {
  @include rect(100%,100%);
}
.hhh {
  @include flexbox();
  @include flex-direction(column);
  header {
    @include flexbox();
    @include justify-content(space-between);
  }
  .top {
    @include rect(100%,1.87rem);
    @include background-color(#ff7100);
    position: relative;
    .gz {
      @include rect(25%,0.26rem);
      @include color(#fff);
      @include font-size(0.12rem);
      @include background-color(#ff8829);
      @include line-height(0.26rem);
      @include text-align();
      @include border-radius(0.13rem 0 0 0.13rem);
      position: relative;
      top: 0.3rem;
      left: 75%;
    }
    .bg {
      @include rect(52%,1.24rem);
      @include background-color(#fe984a);
      @include border-radius(0.1rem);
      transform: rotate(-5deg);
      position: absolute;
      top: 0.3rem;
      left: 7%;
    }
    .yq {
      @include rect(50%,1.2rem);
      @include background-color(#fff);
      @include border-radius(0.1rem);
      @include padding(0.2rem 0 0 0.2rem);
      position: absolute;
      top: 0.3rem;
      left: 8%;
      .dian {
        @include rect(0.1rem,0.1rem);
        @include background-color(#fe984a);
        @include border-radius(50%);
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
      }
      h4 {
        @include font-size(0.24rem);
        @include font-weight(normal);
        @include color(#ff7100);
        @include line-height(0.3rem);
        @include margin(0 0 0.10rem 0);
      }
      p {
        @include color(#666);
        @include font-size(0.16rem);
        span {
          @include color(#ff7100);
        }
      }
    }
    .bobg {
      @include rect(100%,0.12rem);
      @include background-color(#eee);
      position: absolute;
      bottom: 0;
    }
  }
  .main {
    @include flex();
    @include flexbox();
    @include rect(100%,auto);
    @include background-color(#fff);
    @include overflow();
    .null {
      @include flex();
      @include rect(100%,auto);
      @include font-size(0.18rem);
      @include text-align();
      @include margin(1rem 0 0 );
      @include overflow();
    }
    .ff {
      @include flex();
      @include rect(100%,auto);
      @include overflow();
    }
    li {
      @include rect(100%,0.5rem);
      @include border(0 0 1px 0,#ccc,solid);
      @include padding(0 0.2rem);
      position: relative;
      h5 {
        @include font-size(0.16rem);
        @include font-weight(normal);
        @include margin(0.15rem 0 0.04rem);
      }
      p {
        @include font-size(0.12rem);
        @include color(#999);
      }
      b {
        @include font-weight(normal);
        @include font-size(0.18rem);
        @include color(#ff7100);
        position: absolute;
        top: 0;
        right: 0.2rem;
      }
    }
  }
  .bt {
    @include flexbox();
    @include padding(0 30%);
    @include rect(100%,0.44rem);
    @include background-color(#fff);
    @include justify-content(space-between);
    @include align-items();
    @include font-size(0.14rem);
    @include border(0 0 1px 0,#ccc,solid);
    span {
      @include line-height(0.44rem);
      @include padding(0 0.2rem);
    }
    .active {
      @include color(#ff7100);
      @include border(0 0 1px 0,#ff7100,solid);
    }
  }
}
</style>
<script>
import axios from '@/utils/request'
import Header from '@/components/header.vue'
export default {
  data () {
    return {
      state: 1,
      intelist: '',
      kg: true,
      sum: '0',
      summ: '0'
    }
  },
  components: {
    Header
  },
  methods: {
    sr () {
      this.state = 1
    },
    zc () {
      this.state = 2
    }
  },
  watch: {
    state: {
      handler (newVal) {
        const userid = localStorage.getItem('userid')
        axios.get(`/integral?userid=${userid}&state=${newVal}`).then(res => {
          if (res.data.code === '12306') {
            this.kg = false
          } else {
            this.intelist = res.data.data.reverse()
            this.sum = res.data.sum
            this.summ = res.data.summ
            this.intelist.map(i => {
              var sp = i.date.split('')
              sp.length = sp.length - 20
              i.date = sp.join('')
            })
            this.kg = true
          }
        })
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
